<template>
  <div>
    <header>
      <p>
        <i class="iconfont icon-zuojiantou" @click="fun()"></i
        >&nbsp;&nbsp;&nbsp;&nbsp;游戏专区
      </p>
    </header>
    <nav>
      <div class="dis">
        <div class="box" v-for="(v, i) in arr" :key="i">
          <div>
            <img :src="v.bimg" class="bigimg" />
          </div>
          <div>
            <dl class="dl">
              <dt>
                <img :src="v.simg" alt="" />
              </dt>
              <dd>
                <p class="p1">{{ v.txt }}<span>&nbsp;活动&nbsp;</span></p>
                <p class="p2">{{ v.txt2 }}</p>
              </dd>
              <button>{{ v.btn }}</button>
            </dl>
          </div>
        </div>
      </div>
    </nav>
    <div class="yun">
      <p>云游戏-免下载体验</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p class="quan">更多&nbsp;<i class="iconfont icon-youjiantou"></i></p>
    </div>
    <main>
      <div class="hali">
        <dl v-for="(vue, index) in arrtwo" :key="index" class="dldl">
          <dt>
            <img :src="vue.gameimg" class="game" />
          </dt>
          <dd>
            <p>{{ vue.gametitle }}</p>
            <button class="back">去下载</button>
          </dd>
        </dl>
      </div>
    </main>
    <hr />
    <div class="yun">
      <p>小游戏-即点即玩</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p class="quan">更多&nbsp;<i class="iconfont icon-youjiantou"></i></p>
    </div>
    <main>
      <div class="hali">
        <dl v-for="(vue, index) in arrthree" :key="index" class="dldl">
          <dt>
            <img :src="vue.gameimg" class="game" />
          </dt>
          <dd>
            <p>{{ vue.gametitle }}</p>
            <button class="back">去下载</button>
          </dd>
        </dl>
      </div>
    </main>
    <hr />
    <div class="yun">
      <p>注册即送大礼包</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p class="quan">更多&nbsp;<i class="iconfont icon-youjiantou"></i></p>
    </div>
    <main>
      <div class="hali">
        <dl v-for="(vue, index) in arrfour" :key="index" class="dldl">
          <dt>
            <img :src="vue.gameimg" class="game" />
          </dt>
          <dd>
            <p>{{ vue.gametitle }}</p>
            <button class="back">去下载</button>
          </dd>
        </dl>
      </div>
    </main>
    <hr />
    <div class="yun">
      <p>活动推荐</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p class="quan">更多&nbsp;<i class="iconfont icon-youjiantou"></i></p>
    </div>
    <dl class="huodong1">
      <dt>
        <img
          src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1746507603_1660254653_88_88.jpg"
          class="huodong"
        />
      </dt>
      <dd class="huodong2">
        <p class="hd">欢迎回到霍格沃茨！</p>
        <p>&nbsp;&nbsp;参与活动即可赢取哈利波特正版周边！</p>
      </dd>
    </dl>
    <dl class="huodong1">
      <dt>
        <img
          src="https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/50c47b38e32168964a1bfff978e9570f/50c47b38e32168964a1bfff978e9570f.png"
          class="huodong"
        />
      </dt>
      <dd class="huodong2">
        <p class="hd">大触觉醒·礼乐和鸣</p>
        <p>&nbsp;&nbsp;未阴阳师写歌,赢最高十万奖励</p>
      </dd>
    </dl>
    <div class="yun">
      <p>游戏大礼包</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p class="quan">更多&nbsp;<i class="iconfont icon-youjiantou"></i></p>
    </div>
    <footer>
      <div class="topi">
        <img
          src="http://www.4399.com/flashzt/img/hdczjh2/1.jpg"
          class="huagdi"
        />
        <p class="hd">皇帝成长计划2-H5</p>
      </div>
      <div class="btndis">
        <div>
          <p>皇帝成长计划2-基础礼包</p>
          <p>卡包*1,谋略*40</p>
        </div>
        <div><button class="rightbtn">领取</button></div>
      </div>
      <div class="btndis">
        <div>
          <p>皇帝成长计划2-基础礼包</p>
          <p>卡包*1,谋略*40</p>
        </div>
        <div><button class="rightbtn">领取</button></div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.push("/home");
    },
  },
  data() {
    return {
      arr: [
        {
          bimg: "https://pics1.baidu.com/feed/d058ccbf6c81800ada6b00569e9ccef2838b470a.jpeg?token=3c5ce63e28a733787abdd5231bbc4b18",
          simg: "https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1746507603_1660254653_88_88.jpg",
          txt: "欢迎回到霍格沃茨！",
          txt2: "参与活动即可赢取哈利波特正版周边！",
          btn: "立即玩",
        },
        {
          bimg: "https://nie.res.netease.com/r/pic/20210108/3f691639-c40c-4cae-9697-4653ef510d73.jpg",
          simg: "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgameplus-platform.cdn.bcebos.com%2Fgameplus-platform%2Fupload%2Ffile%2Fimg%2F91f2be11ac068d7e8d31b3d5228e23ae%2F91f2be11ac068d7e8d31b3d5228e23ae.png&app=2000&size=f9999,10000&n=0&g=4n&q=90&fmt=jpeg?sec=0&t=8a6f27de2ff7a44469bea78b78ef57f9",
          txt: "天谕·幻想开放世界",
          txt2: "金秋外观活动上线",
          btn: "立即玩",
        },
        {
          bimg: "https://nie.res.netease.com/r/pic/20210701/18a4657f-f1a3-4fba-8741-55d751e8d99e.jpg",
          simg: "https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/02950166b12ba84903bf80c705bf91a5/02950166b12ba84903bf80c705bf91a5.png",
          txt: "第五人格暑期活动第二弹",
          txt2: "第五人格暑期活动第二弹",
          btn: "立即玩",
        },
        {
          bimg: "https://sky.res.netease.com/pc/fab/20210717163856//img/page1_bg_d0695fe.jpg",
          simg: "https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/75756687cf71d699c1c9ba74dd2075f1_88_88.jpg",
          txt: "光·遇 唯美 治愈 社交",
          txt2: "与小王子一起的奇妙之旅！",
          btn: "立即玩",
        },
      ],
      arrtwo: [
        {
          gameimg:
            "https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1746507603_1660254653_88_88.jpg",
          gametitle: "哈利波特:...",
        },
        {
          gameimg:
            "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fappdown.baidu.com%2Fimg%2F0%2F512_512%2F2e61aa77e6f2a7bfb5f753f6dd282c9a.png&app=2000&size=f96,96&n=0&g=0n&q=85&fmt=jpeg?sec=0&t=ec8063c06b8eec38908014baa63d6f79",
          gametitle: "宝可梦大冒险",
        },
        {
          gameimg:
            "https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/4a436579d6ad202343d93f7acda71cab/4a436579d6ad202343d93f7acda71cab.png",
          gametitle: "光·遇",
        },
        {
          gameimg:
            "https://gimg0.baidu.com/gimg/src=https%3A%2F%2Fgameplus-platform.cdn.bcebos.com%2Fgameplus-platform%2Fupload%2Ffile%2Fimg%2Fe0c88cfe9095b2c2712e2b9c709a446d%2Fe0c88cfe9095b2c2712e2b9c709a446d.png&app=2000&size=f9999,10000&n=0&g=4n&q=90&fmt=jpeg?sec=0&t=4505eda17407e9c6b90db98454bc2356",
          gametitle: "漫威超级战争",
        },
        {
          gameimg:
            "http://imga2.5054399.com/upload_pic/2021/8/27/4399_14073511372.jpg",
          gametitle: "王者荣耀",
        },
      ],
      arrthree: [
        {
          gameimg: "http://imga5.5054399.com/upload_pic/2019/s/198744.jpg",
          gametitle: "小粉龙跳跃",
        },
        {
          gameimg:
            "https://bkimg.cdn.bcebos.com/pic/377adab44aed2e7354f698598101a18b87d6faac?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg",
          gametitle: "冒险王3OL",
        },
        {
          gameimg:
            "http://imga2.5054399.com/upload_pic/2021/8/23/4399_14170440713.jpg",
          gametitle: "代号斩",
        },
        {
          gameimg: "http://f04.img4399.com/ma~a_big_96738~250x250?1602849967",
          gametitle: "钢琴块2",
        },
        {
          gameimg: "https://game.gtimg.cn/images/gp/public/logo.png",
          gametitle: "和平静音",
        },
      ],
      arrfour: [
        {
          gameimg:
            "https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/50c47b38e32168964a1bfff978e9570f/50c47b38e32168964a1bfff978e9570f.png",
          gametitle: "阴阳师:妖...",
        },
        {
          gameimg:
            "http://gdown.baidu.com/img/0/512_512/01af2ab795c007baa814079b1737eb83.png",
          gametitle: "率土之滨",
        },
        {
          gameimg:
            "https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=dac876036f5f3b0d24722e47ebbe96fd&wh_rate=null&src=http%3A%2F%2Ftiebapic.baidu.com%2Ftieba%2Fpic%2Fitem%2Fb319ebc4b74543a9a46e0d7409178a82b9011414.jpg",
          gametitle: "神都夜行录",
        },
        {
          gameimg:
            "https://bkimg.cdn.bcebos.com/pic/6159252dd42a283406b2115954b5c9ea15cebf4f?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg",
          gametitle: "网易棋牌-水...",
        },
        {
          gameimg:
            "https://dss0.bdstatic.com/9bA1vGfa2gU2pMbfm9GUKT-w/timg?wisealaddin&sec=1631582998&di=c439ab70e5495c671a7dcc78dbe09d00&quality=100&size=f128_128&src=http%3A%2F%2Ft11.baidu.com%2Fit%2Fu%3D595196524%2C1022816912%26fm%3D179%26app%3D42%26f%3DJPEG%3Fw%3D121%26h%3D91%26s%3DB9E56F8652908D92CE32E3770300D05B",
          gametitle: "黄金矿工",
        },
      ],
    };
  },
};
</script>

<style scoped>
.btndis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
}
.rightbtn {
  width: 1rem;
  height: 0.5rem;
  background-color: #fff;
  color: red;
  border: 1px red solid;
  margin-right: 0.6rem;
}
.topi {
  display: flex;
}
.huangdi {
  width: 0.8rem;
  height: 0.8rem;
}
footer {
  height: 3.5rem;
  margin-top: 0.3rem;
  margin-left: 0.3rem;
}
.hd {
  font-size: 0.3rem;
  font-weight: 600;
  line-height: 0.8rem;
  margin-left: 0.2rem;
}
.huodong2 {
  line-height: 0.6rem;
  text-align: left;
}
.huodong1 {
  display: flex;
  margin-left: 0.3rem;
  margin-top: 0.3rem;
}
.huodong {
  width: 1.5rem;
  height: 1.5rem;
}
dd {
  text-align: center;
}
main {
  overflow: auto;
}
.dldl {
  width: 20%;
}
.back {
  color: red;
  background-color: #fff;
  border-radius: 0.3rem;
  border: none;
  border: 1px solid red;
}
.game {
  width: 1.5rem;
  height: 1.5rem;
}
.hali {
  display: flex;
  width: 115%;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}
.icon-youjiantou {
  font-size: 0.3rem;
}
.quan {
  border: 1px solid #ccc;
  width: 1.5rem;
  text-align: center;
  height: 0.6rem;
  line-height: 0.6rem;
  border-radius: 0.3rem;
}
.yun {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-evenly;
  font-size: 0.35rem;
  font-weight: 600;
}
.dis {
  display: flex;
  width: 370%;
}
nav {
  overflow: auto;
}
.p1 {
  font-size: 0.28rem;
}
.p2 {
  color: #ccc;
}
span {
  border: 1px solid #ccc;
  color: #ccc;
  border-radius: 0.2rem;
}
button {
  color: #fff;
  background-color: red;
  border-radius: 0.3rem;
  border: none;
}
.dl {
  display: flex;
  justify-content: space-evenly;
  margin-top: 0.5rem;
}
dd {
  line-height: 0.4rem;
}

.box {
  width: 90%;
  height: 5.5rem;
  margin-left: 1%;
  margin-top: 0.4rem;
  box-shadow: 0px 0px 6px 0px;
  border-radius: 0.4rem;
}
.bigimg {
  width: 100%;
  height: 3.8rem;
}
img {
  width: 0.8rem;
  border-radius: 0.4rem;
  height: 0.8rem;
}
header {
  font-size: 0.45rem;
  margin-top: 0.3rem;
  margin-left: 0.3rem;
  font-weight: 550;
}
.icon-zuojiantou {
  font-size: 0.5rem;
}
</style>